import { useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/200.png'
const useLazload = (target, url) => {
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observableElement) => {
      if (isIntersecting) {
        target.onerror = () => {
          target.src = defaltImg
        }
        stop()
        target.src = url
      }
    }, { threshold: 0.1 }
  )
}
export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        el.src = defaltImg
        console.log(binding.value)
        useLazload(el, binding.value)
      }
    })
  }
}
// const myDirective = {
//   install (app) {
//     // 定义   app.directive('指令名'，配置对象)
//     app.directive('imgLazy', {
//       mounted (el, binding) {
//         const { stop } = useIntersectionObserver(el,
//           ([{ isIntersecting }], observable) => {
//             if (isIntersecting) {
//               stop()
//               el.src = binding.value
//             }
//           }, { threshold: 0 })
//         // console.log('111', el, binding)
//       }
//     })
//   }
// }
// export default myDirective
